<template>
  <view class="select-list-box px-3.5 box-border">
    <view class="list-box">
      <up-list
        @scrolltolower="scrolltolower"
        height="calc(100vh - 64rpx - 83rpx - 20rpx)"
      >
        <template v-if="list.length">
          <up-checkbox-group v-model="selectUserIds" placement="column">
            <up-list-item v-for="(item, index) in list" :key="index">
              <up-cell>
                <template #icon>
                  <up-avatar
                    shape="circle"
                    size="42"
                    :src="imgPrefix + item.avatar"
                  ></up-avatar>
                </template>
                <template #title>
                  <view class="u-slot-title">
                    <text class="text-[29rpx] text-black ml-2">{{
                      item.userName
                    }}</text>
                    <text class="text-[29rpx] text-black ml-2">{{
                      item.badgeNumber
                    }}</text>
                  </view>
                </template>
                <template #right-icon>
                  <up-checkbox
                    activeColor="#0189FE"
                    :name="item.policeUserId"
                    shape="circle"
                  ></up-checkbox>
                </template>
              </up-cell>
            </up-list-item>
          </up-checkbox-group>
        </template>
        <up-empty
          v-else
          mode="history"
          text="该社区暂无民警"
          icon="http://cdn.uviewui.com/uview/empty/history.png"
        >
        </up-empty>
      </up-list>
    </view>
    <view class="btm-btn">
      <button
        class="btn-0189FE h-[83rpx] leading-[83rpx] text-[33rpx]"
        @click="onsubmit"
      >
        确 认
      </button>
    </view>
    <up-toast ref="uToastRef"></up-toast>
  </view>
</template>
<script setup lang="ts">
import { policeListByCommunityId } from "@/api/police";
import { imgPrefix } from "@/config/app";
import { useUserInfoStore } from "@/stores/userInfo";
const userInfoStore = useUserInfoStore();

const uToastRef = <any>ref(null);
const selectUserIds = ref([]);
const list = ref(<any>[]);

onLoad((options) => {
  if (options && options.users) {
    selectUserIds.value = options.users.split(",").map(Number);
  }
  // loadmore();
  getPoliceList();
});

const scrolltolower = () => {
  loadmore();
};

const loadmore = () => {
  console.log("加载更多");
};

// 获取社区民警信息
const getPoliceList = () => {
  uni.showLoading({
    title: "加载中",
    mask: true,
  });
  policeListByCommunityId({ communityId: userInfoStore.crowdInfo.communityId })
    .then((res: any) => {
      uni.hideLoading();
      const { data } = res;
      list.value = data ?? [];
    })
    .catch((err: any) => {
      uni.hideLoading();
      uToastRef.value.show({
        type: "error",
        message: err,
      });
    });
};

const onsubmit = () => {
  if (selectUserIds.value.length) {
    let policeUsers = <any>[];
    list.value.forEach((item: any) => {
      if (selectUserIds.value.indexOf(item.policeUserId) != -1) {
        policeUsers.push(item.userName + " " + item.badgeNumber);
      }
    });
    uni.$emit("updateServiceUser", {
      selectUserIds: selectUserIds.value,
      policeUsers,
    });
    uni.navigateBack({
      delta: 1,
    });
  } else {
    uToastRef.value.show({
      type: "warning",
      message: "请选择对象",
    });
  }
};
</script>

<style lang="scss" scoped>
.select-list-box {
  ::v-deep .u-list-item {
    width: 100%;
  }
  ::v-deep .u-cell__body {
    padding: 16rpx 0;
  }
  ::v-deep .u-radio__icon-wrap {
    margin-right: 0;
  }
}
</style>
